<template>
  <div class="page-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <h1 class="page-title">系统设置</h1>
      <p class="page-description">管理系统配置和参数</p>
    </div>
    
    <!-- 设置内容 -->
    <a-row :gutter="24">
      <!-- 左侧设置菜单 -->
      <a-col :span="6">
        <a-card class="settings-menu" :bordered="false">
          <a-menu
            :default-selected-keys="[activeTab]"
            @menu-item-click="handleTabChange"
            class="settings-nav"
          >
            <a-menu-item key="basic">
              <template #icon>
                <icon-settings />
              </template>
              基本设置
            </a-menu-item>
            <a-menu-item key="hotel">
              <template #icon>
                <icon-home />
              </template>
              酒店信息
            </a-menu-item>
            <a-menu-item key="room">
              <template #icon>
                <icon-home />
              </template>
              房间设置
            </a-menu-item>
            <a-menu-item key="user">
              <template #icon>
                <icon-user />
              </template>
              用户管理
            </a-menu-item>
            <a-menu-item key="notification">
              <template #icon>
                <icon-notification />
              </template>
              通知设置
            </a-menu-item>
            <a-menu-item key="security">
              <template #icon>
                <icon-lock />
              </template>
              安全设置
            </a-menu-item>
          </a-menu>
        </a-card>
      </a-col>
      
      <!-- 右侧设置内容 -->
      <a-col :span="18">
        <!-- 基本设置 -->
        <a-card v-if="activeTab === 'basic'" title="基本设置" class="settings-content">
          <a-form :model="basicSettings" layout="vertical">
            <a-form-item label="系统名称">
              <a-input v-model="basicSettings.systemName" placeholder="请输入系统名称" />
            </a-form-item>
            <a-form-item label="系统描述">
              <a-textarea
                v-model="basicSettings.systemDescription"
                placeholder="请输入系统描述"
                :rows="3"
              />
            </a-form-item>
            <a-form-item label="时区设置">
              <a-select v-model="basicSettings.timezone" style="width: 200px">
                <a-option value="Asia/Shanghai">北京时间 (UTC+8)</a-option>
                <a-option value="UTC">协调世界时 (UTC)</a-option>
                <a-option value="America/New_York">纽约时间 (UTC-5)</a-option>
              </a-select>
            </a-form-item>
            <a-form-item label="语言设置">
              <a-radio-group v-model="basicSettings.language">
                <a-radio value="zh-CN">简体中文</a-radio>
                <a-radio value="en-US">English</a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" @click="saveBasicSettings">保存设置</a-button>
            </a-form-item>
          </a-form>
        </a-card>
        
        <!-- 酒店信息 -->
        <a-card v-if="activeTab === 'hotel'" title="酒店信息" class="settings-content">
          <a-form :model="hotelSettings" layout="vertical">
            <a-form-item label="酒店名称">
              <a-input v-model="hotelSettings.hotelName" placeholder="请输入酒店名称" />
            </a-form-item>
            <a-form-item label="酒店地址">
              <a-textarea
                v-model="hotelSettings.address"
                placeholder="请输入酒店地址"
                :rows="2"
              />
            </a-form-item>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="联系电话">
                  <a-input v-model="hotelSettings.phone" placeholder="请输入联系电话" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="邮箱">
                  <a-input v-model="hotelSettings.email" placeholder="请输入邮箱" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-form-item label="酒店描述">
              <a-textarea
                v-model="hotelSettings.description"
                placeholder="请输入酒店描述"
                :rows="4"
              />
            </a-form-item>
            <a-form-item>
              <a-button type="primary" @click="saveHotelSettings">保存设置</a-button>
            </a-form-item>
          </a-form>
        </a-card>
        
        <!-- 房间设置 -->
        <a-card v-if="activeTab === 'room'" title="房间设置" class="settings-content">
          <a-form :model="roomSettings" layout="vertical">
            <a-form-item label="默认入住时间">
              <a-time-picker
                v-model="roomSettings.defaultCheckinTime"
                format="HH:mm"
                style="width: 200px"
              />
            </a-form-item>
            <a-form-item label="默认退房时间">
              <a-time-picker
                v-model="roomSettings.defaultCheckoutTime"
                format="HH:mm"
                style="width: 200px"
              />
            </a-form-item>
            <a-form-item label="房间状态自动更新">
              <a-switch v-model="roomSettings.autoUpdateStatus" />
              <span class="ml-2">启用后系统将自动更新房间状态</span>
            </a-form-item>
            <a-form-item label="清洁提醒时间">
              <a-input-number
                v-model="roomSettings.cleaningReminderHours"
                :min="1"
                :max="24"
                style="width: 200px"
              />
              <span class="ml-2">小时</span>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" @click="saveRoomSettings">保存设置</a-button>
            </a-form-item>
          </a-form>
        </a-card>
        
        <!-- 用户管理 -->
        <a-card v-if="activeTab === 'user'" title="用户管理" class="settings-content">
          <div class="user-management">
            <div class="user-list">
              <a-table
                :columns="userColumns"
                :data="users"
                :pagination="false"
                size="small"
              >
                <template #role="{ record }">
                  <a-tag :color="getRoleColor(record.role)">
                    {{ getRoleText(record.role) }}
                  </a-tag>
                </template>
                <template #status="{ record }">
                  <a-tag :color="record.status ? 'green' : 'red'">
                    {{ record.status ? '启用' : '禁用' }}
                  </a-tag>
                </template>
                <template #actions="{ record }">
                  <a-space>
                    <a-button type="text" size="small" @click="editUser(record)">
                      编辑
                    </a-button>
                    <a-button type="text" size="small" status="danger" @click="deleteUser(record.id)">
                      删除
                    </a-button>
                  </a-space>
                </template>
              </a-table>
            </div>
            <div class="add-user">
              <a-button type="primary" @click="showAddUserModal">
                <template #icon>
                  <icon-plus />
                </template>
                添加用户
              </a-button>
            </div>
          </div>
        </a-card>
        
        <!-- 通知设置 -->
        <a-card v-if="activeTab === 'notification'" title="通知设置" class="settings-content">
          <a-form :model="notificationSettings" layout="vertical">
            <a-form-item label="邮件通知">
              <a-switch v-model="notificationSettings.emailNotification" />
              <span class="ml-2">启用邮件通知</span>
            </a-form-item>
            <a-form-item label="短信通知">
              <a-switch v-model="notificationSettings.smsNotification" />
              <span class="ml-2">启用短信通知</span>
            </a-form-item>
            <a-form-item label="系统通知">
              <a-switch v-model="notificationSettings.systemNotification" />
              <span class="ml-2">启用系统内通知</span>
            </a-form-item>
            <a-form-item label="通知类型">
              <a-checkbox-group v-model="notificationSettings.notificationTypes">
                <a-checkbox value="checkin">入住提醒</a-checkbox>
                <a-checkbox value="checkout">退房提醒</a-checkbox>
                <a-checkbox value="reservation">预订提醒</a-checkbox>
                <a-checkbox value="maintenance">维护提醒</a-checkbox>
              </a-checkbox-group>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" @click="saveNotificationSettings">保存设置</a-button>
            </a-form-item>
          </a-form>
        </a-card>
        
        <!-- 安全设置 -->
        <a-card v-if="activeTab === 'security'" title="安全设置" class="settings-content">
          <a-form :model="securitySettings" layout="vertical">
            <a-form-item label="密码策略">
              <a-checkbox-group v-model="securitySettings.passwordPolicy">
                <a-checkbox value="minLength">最少8位字符</a-checkbox>
                <a-checkbox value="uppercase">包含大写字母</a-checkbox>
                <a-checkbox value="lowercase">包含小写字母</a-checkbox>
                <a-checkbox value="numbers">包含数字</a-checkbox>
                <a-checkbox value="symbols">包含特殊字符</a-checkbox>
              </a-checkbox-group>
            </a-form-item>
            <a-form-item label="登录失败锁定">
              <a-input-number
                v-model="securitySettings.maxLoginAttempts"
                :min="3"
                :max="10"
                style="width: 200px"
              />
              <span class="ml-2">次失败后锁定账户</span>
            </a-form-item>
            <a-form-item label="会话超时">
              <a-input-number
                v-model="securitySettings.sessionTimeout"
                :min="30"
                :max="480"
                style="width: 200px"
              />
              <span class="ml-2">分钟</span>
            </a-form-item>
            <a-form-item label="IP白名单">
              <a-textarea
                v-model="securitySettings.ipWhitelist"
                placeholder="每行一个IP地址"
                :rows="3"
              />
            </a-form-item>
            <a-form-item>
              <a-button type="primary" @click="saveSecuritySettings">保存设置</a-button>
            </a-form-item>
          </a-form>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Message } from '@arco-design/web-vue'
import {
  IconSettings,
  IconHome,
  IconUser,
  IconNotification,
  IconLock,
  IconPlus
} from '@arco-design/web-vue/es/icon'

// 当前激活的标签页
const activeTab = ref('basic')

// 基本设置
const basicSettings = reactive({
  systemName: '酒店管理系统',
  systemDescription: '专业的酒店管理解决方案',
  timezone: 'Asia/Shanghai',
  language: 'zh-CN'
})

// 酒店设置
const hotelSettings = reactive({
  hotelName: '豪华酒店',
  address: '北京市朝阳区xxx街道xxx号',
  phone: '010-12345678',
  email: 'info@hotel.com',
  description: '提供优质服务的豪华酒店'
})

// 房间设置
const roomSettings = reactive({
  defaultCheckinTime: '14:00',
  defaultCheckoutTime: '12:00',
  autoUpdateStatus: true,
  cleaningReminderHours: 2
})

// 通知设置
const notificationSettings = reactive({
  emailNotification: true,
  smsNotification: false,
  systemNotification: true,
  notificationTypes: ['checkin', 'checkout', 'reservation']
})

// 安全设置
const securitySettings = reactive({
  passwordPolicy: ['minLength', 'uppercase', 'lowercase', 'numbers'],
  maxLoginAttempts: 5,
  sessionTimeout: 120,
  ipWhitelist: ''
})

// 用户列表
const users = ref([
  {
    id: 1,
    name: '管理员',
    email: 'admin@hotel.com',
    role: 'admin',
    status: true,
    lastLogin: '2024-01-15 10:30:00'
  },
  {
    id: 2,
    name: '前台经理',
    email: 'manager@hotel.com',
    role: 'manager',
    status: true,
    lastLogin: '2024-01-15 09:15:00'
  },
  {
    id: 3,
    name: '前台员工',
    email: 'staff@hotel.com',
    role: 'staff',
    status: true,
    lastLogin: '2024-01-15 08:45:00'
  }
])

// 用户表格列
const userColumns = [
  { title: '姓名', dataIndex: 'name' },
  { title: '邮箱', dataIndex: 'email' },
  { title: '角色', slotName: 'role' },
  { title: '状态', slotName: 'status' },
  { title: '最后登录', dataIndex: 'lastLogin' },
  { title: '操作', slotName: 'actions', width: 120 }
]

// 处理标签页切换
const handleTabChange = (key) => {
  activeTab.value = key
}

// 获取角色颜色
const getRoleColor = (role) => {
  const colors = {
    admin: 'red',
    manager: 'blue',
    staff: 'green'
  }
  return colors[role] || 'gray'
}

// 获取角色文本
const getRoleText = (role) => {
  const texts = {
    admin: '管理员',
    manager: '经理',
    staff: '员工'
  }
  return texts[role] || '未知'
}

// 保存基本设置
const saveBasicSettings = () => {
  Message.success('基本设置保存成功')
}

// 保存酒店设置
const saveHotelSettings = () => {
  Message.success('酒店信息保存成功')
}

// 保存房间设置
const saveRoomSettings = () => {
  Message.success('房间设置保存成功')
}

// 保存通知设置
const saveNotificationSettings = () => {
  Message.success('通知设置保存成功')
}

// 保存安全设置
const saveSecuritySettings = () => {
  Message.success('安全设置保存成功')
}

// 编辑用户
const editUser = (user) => {
  console.log('编辑用户:', user)
}

// 删除用户
const deleteUser = (id) => {
  console.log('删除用户:', id)
}

// 显示添加用户模态框
const showAddUserModal = () => {
  console.log('显示添加用户模态框')
}
</script>

<style scoped>
.settings-menu {
  height: fit-content;
}

.settings-nav {
  border: none;
}

.settings-content {
  min-height: 600px;
}

.user-management {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.user-list {
  flex: 1;
}

.add-user {
  display: flex;
  justify-content: flex-end;
}

.ml-2 {
  margin-left: 8px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .arco-col {
    span: 24;
  }
  
  .settings-menu {
    margin-bottom: 16px;
  }
}
</style>
